<template>
  <div class="page changePassword">
    <div class="scroll-view">
      <customHeader middleTitle="修改密码" />
      <div class="page-body">
        <ul class="passwordlist">
          <li>
            <span class="left">原密码</span>
            <div class="right">
              <inputClear :type="!oldpassOpen?'password':'text'"
                          warpClass="changePassword-input"
                          v-model="oldPassword"
                          @input="handleInput('change')"
                          placeholder="请填写密码" />
              <!-- <i v-if="!oldpassOpen"
                 @click="oldpassOpen = true"
                 class="sl-Close_eyes"></i>
              <i v-if="oldpassOpen"
                 @click="oldpassOpen = false"
                 class="sl-Open_eyes"></i>-->
            </div>
          </li>
          <li>
            <span class="left">新密码</span>
            <div class="right">
              <inputClear :type="!newpassOpen?'password':'text'"
                          warpClass="changePassword-input"
                          v-model="newPassword"
                          @input="handleInput('change')"
                          placeholder="6~14位数字、字母、标点符号" />
              <!-- <i v-if="!newpassOpen"
                 @click="newpassOpen = true"
                 class="sl-Close_eyes"></i>
              <i v-if="newpassOpen"
                 @click="newpassOpen = false"
                 class="sl-Open_eyes"></i> -->
            </div>
          </li>
          <li>
            <span class="left">确认密码</span>
            <div class="right">
              <inputClear :type="!confirmpassOpen?'password':'text'"
                          warpClass="changePassword-input"
                          v-model="confirmpass"
                          @input="handleInput('change')"
                          placeholder="请再次填写新密码" />
              <!-- <i v-if="!confirmpassOpen"
                 @click="confirmpassOpen = true"
                 class="sl-Close_eyes"></i>
              <i v-if="confirmpassOpen"
                 @click="confirmpassOpen = false"
                 class="sl-Open_eyes"></i> -->
            </div>
          </li>
        </ul>
        <div class="btn-wrap">
          <div class="btn" @click="submit" :class="{disabled:!canSubmit}">提交</div>
        </div>
        <!-- <p class="more-info">密码必须包含不少于6位的数字和字母</p>
         -->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import { Toast } from "mint-ui";

export default {
  name: "changePassword",
  data() {
    return {
      oldPassword: "",
      oldpassOpen: false,
      newPassword: "",
      newpassOpen: false,
      confirmpass: "",
      confirmpassOpen: false,
      canSubmit: false
    };
  },
  methods: {
    handleInput() {
      if (this.oldPassword && this.newPassword && this.confirmpass) {
        this.canSubmit = true;
      } else {
        this.canSubmit = false;
      }
    },
    submit() {
      if (
        this.oldPassword == "" ||
        this.newPassword == "" ||
        this.confirmpass == ""
      ) {
        Toast("请输入密码");
        return false;
      }
      if (this.confirmpass != this.newPassword) {
        Toast("两次输入密码不一致，请重新输入");
        return false;
      }
      //密码正则
      var reg = /^[a-zA-z0-9~!@#$%^&*()_+-={}|\[\]:";'<>?,.]{6,14}$/;
      debugger
      if (!reg.test(this.oldPassword) || !reg.test(this.newPassword)) {
        Toast("密码格式不正确，应为6~14位数字、字母、标点符号");
        return false;
      }
      if (this.canSubmit) {
        this.ajax({
          type: "post",
          data: {
            oldPassword: this.oldPassword,
            confirmpass: this.confirmpass,
            newPassword: this.newPassword
          },
          url: "newapp/setting/modifyPwd.do",
          controlLoading: true
        }).then(res => {
          if (res.success) {
            this.$router.back(-1);
          } else {
            Toast(res.msg);
          }
        }).catch(err=>{

        });
      }
    }
  },
  components: {
    customHeader,
    inputClear
  }
};
</script>
<style lang='scss' scoped>
@import "changePassword";
</style>
<style lang="scss">
@import "../../style/public";
.changePassword-input {
  text-align: right !important;
  @include remCalc(font-size, 28, !important);
}
</style>
